<style scoped>
.login-wrapper {
	padding-top: 1.14rem;
	overflow: hidden;
}
.animation-wrapper {
	display: flex;
	width: 200vw;
	transition: all .3s;
}
.phone-wrapper, .code-input-wrapper {
	/* display: inline-block; */
	width: 100vw;
	box-sizing: border-box;
}
.phone-wrapper {
	padding: 0 .45rem;
}
.logo {
	display: inline-block;
	width: 1.32rem;
	height: 1.32rem;
	border-radius: 50%;
	background: url(~@/assets/logo.png);
	background-size: 100% 100%;
}
.title {
	color: #333;
	font-size: .44rem;
}
.input-wrapper {
	margin-top: .8rem;
	position: relative;

	& >>> .hoc-svg-wrapper {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}
.input {
	width: 100%;
	height: .48rem;
	padding: .22rem 0 .26rem;
	font-size: .32rem;
	border-bottom: 1px solid #DEDEDE;
	transition: all .3s;
}
.input:focus {
	border-bottom-color: #377CFF;
}
.input::placeholder {
	color: #CCC;
}
.input::-ms-reveal {
	display: none;
}
.send-code-btn {
	height: .96rem;
	margin-top: .8rem;
	font-size: .36rem;
	line-height: .96rem;
	border-radius: .48rem;
	background-color: #377CFF;
}
.send-code-btn:active {
	background-color: #377CFF, rgba(0, 0, 0, .1);
}
.tips {
	margin-top: .16rem;
	color: #666;
	font-size: .24rem;
	line-height: .36rem;
}

.code-input-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100vw - .9rem);
}
.code-input {
	width: .9rem;
	line-height: .96rem;
	text-align: center;
	border-radius: 0;
	border-bottom: 1px solid #DEDEDE;
	transition: all .3s;
}
.code-input:focus {
	border-bottom-color: #377CFF;
}
.timer-wrapper {
	margin-top: .16rem;
	text-align: right;
	color: #377CFF;
	font-size: .24rem;
}
</style>

<template>
	<div class="login-wrapper">
		<div class="animation-wrapper" :style="style">
			<div class="phone-wrapper">
				<h1 class="title">智慧社区欢迎你</h1>
				<div class="input-wrapper">
					<input class="input" type="tel" pattern="\d*" autofocus maxlength="11" placeholder="请输入你的手机号" v-format.number="phone" v-model="phone" @keyup.enter="verify">
					<hoc-svg :width="iconSize" :height="iconSize" name="close" v-if="phone" @click.native="phone = ''" />
				</div>
				<p class="tips">如果手机号未注册，将自动为你生成账号</p>

				<hoc-btn class="send-code-btn" :effectType="1" v-model="btnStage" :disabled="disabled" @click="verify">发送验证码</hoc-btn>
			</div>

			<div class="phone-wrapper">
				<h1 class="title">验证码</h1>
				<p class="tips">已发送至 {{phoneFormat}}</p>
				<div class="code-input-wrapper">
					<input class="code-input" type="tel" pattern="\d*" maxlength="1" :data-index="n" v-format.number="phone" ref="input" @input="codeInput" v-for="n of 6">
				</div>

				<div class="timer-wrapper">
					<template v-if="time">
						{{time}}s
					</template>
					<template v-else>
						<span @click="sendCode">重新发送</span>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 0 手机号码输入框
				// 1 验证码
				stage: 0,

				time: 0,

				a: '',

				phone: '',
				btnStage: 0
			}
		},

		computed: {
			style() {
				return {
					transform: `translateX(-${this.stage * 100}vw)`
				}
			},
			phoneFormat() {
				return this.phone.replace(/\B(?=(\d{4})+(?!\d))/g, ' ')
			},
			disabled() {
				if (this.phone.length === 11) {
					return false
				}

				return true
			},
			iconSize() {
				return (window.innerWidth * 44) / 750
			}
		},

		methods: {
			startTimer() {
				this.$timer = setTimeout(function timerInner() {
					this.time--

					if (this.time) {
						this.startTimer()
					}
				}.bind(this), 1000)
			},
			codeInput(e) {
				const index = e.target.dataset.index

				if (index <= 5) {
					this.$refs.input[index].focus()
				} else {
					this.$toast('最后了')

					// 校验验证码
					this.verifyCode()
				}
			},
			async verifyCode() {
				const params = {
					phone: this.phone,
					code: this.$refs.input.map((item) => item.value).join('')
				}

				const {success, data} = await axios.get('/api/list', params)

				if (! success) {
					return
				}

				sessionStorage.setItem('isLogin', 1)
				sessionStorage.setItem('userInfo', JSON.stringify({
					username: '泰山小霸王',
					avatar: 'https://img01.sogoucdn.com/app/a/100520020/e981016c9b8a20db5778c66be5d646f1'
				}))

				location.href = '/'
			},
			async sendCode() {
				this.time = 59
				this.startTimer()

				this.sendCodeAsync()
			},
			async sendCodeAsync() {
				const params = {
					username: this.phone
				}

				const {success, data} = await axios.post('/api/auth/login', params)

				this.btnStage = 0

				if (! success) {
					return
				}

				this.stage = 1
			},
			async verify() {
				const params = {
					phone: this.phone
				}

				const {success, data} = await axios.get('/api/list', params)

				this.btnStage = 0

				if (! success) {
					return
				}

				this.time = 59
				this.startTimer()

				this.stage = 1

				this.$nextTick(() => {
					this.$refs.input[0].focus()
				})
			}
		}
	}
</script>